<template>
	<view>
		<!-- 个人信息 -->
		<view style="background-color: white;margin: 70rpx 20rpx; margin-top: 20rpx; border-radius: 16rpx; " @click="intoUserInfo()">
			<view style="margin: 10rpx 20rpx; display: block; padding-top: 10rpx; text-align: center; ">
				<image :src="avatar" alt="" mode="widthFix" style="width: 200rpx; border-radius: 50%;" />
			</view>
			<view style="margin: 10rpx; text-align: center;">
				<text class="info-grid" style="font-size: 50rpx;">用户名:{{username}}</text>
			</view>
			<view style="margin: 10rpx;padding-bottom: 20rpx;; text-align: center;">
				<text class="info-grid">id:{{ID}}</text>
			</view>
			
		</view>
		<!-- 订单 -->
		<view style="background-color: white; margin: 8rpx 10rpx; border-radius: 13px;">
			<view>
			<view style="display: flex; align-items:center; padding-top: 10rpx; padding-left: 10rpx;">
				<uni-icons type="wallet-filled" size="25" color="#fdcd1c"></uni-icons>
				<text style="font-size: 34rpx;">我的订单</text>
				<text style="font-size: 31rpx;color: #d8dada; margin-left:auto">查看全部订单 </text>
				<uni-icons type="forward" size="15" color="#c8c8c8"></uni-icons>
			</view>
		<!-- 订单状态 -->
				<uni-row>
					<uni-col :span="8">
						<view class="grid-item-box">
							<uni-icons type="wallet" size="27" color="#8a8a7e"></uni-icons>
							<text class="order-text">待付款</text>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view class="grid-item-box">
							<uni-icons type="notification" size="27" color="#8a8a7e"></uni-icons>
							<text class="order-text">待取货</text>
						</view>
					</uni-col>
					
					<uni-col :span="8">
						<view class="grid-item-box">
							<uni-icons type="checkmarkempty" size="27" color="#8a8a7e"></uni-icons>
							<text class="order-text">已完成</text>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		
		<!-- 收藏 -->
		<view style= "padding: 12rpx 8rpx; border-radius: 17px; background-color: white;margin: 18rpx 4rpx; display: flex; align-items: center;">
			<uni-icons type="star-filled" size="27" color="#fdcd1c"></uni-icons>
			<text style="font-size: 34rpx;">我的收藏</text>
			<view style="margin-left:auto">
				<uni-icons type="forward" size="20" color="#8a8a7e"></uni-icons>
			</view>
		</view>
		
		<!-- 关于我们 -->
		<view style= "padding: 12rpx 8rpx; border-radius: 17px; background-color: white; margin: 22rpx 4rpx; display: flex; align-items: center;">
			<uni-icons type="staff-filled" size="27" color="#fdcd1c"></uni-icons>
			<text style="font-size: 34rpx;">关于我们</text>
			<view style="margin-left:auto">
				<uni-icons type="forward" size="20" color="#8a8a7e"></uni-icons>
			</view>
		</view>
		<!-- 进入商家平台 -->
		<view @click="intoEmployee()" style= "padding: 12rpx 8rpx; border-radius: 17px; background-color: white; margin: 18rpx 4rpx; display: flex; align-items: center;">
			<uni-icons type="tune-filled" size="27" color="#fdcd1c"></uni-icons>
			<text style="font-size: 34rpx;">进入商家平台</text>
			<view style="margin-left:auto">
				<uni-icons type="forward" size="20" color="#8a8a7e"></uni-icons>
			</view>
		</view>
		
		<!-- 注销 -->
		<view>
			<button type='warn' style="margin: 50rpx 100rpx; background-color: #fdcd1c;" @click="logOut()">注销</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '',
				username: '',
				ID: ''
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			logOut(){
				uni.removeStorage({
					key: 'token',
					success: () => {
						uni.redirectTo({
							url: '/pages/login/login'
						})
					},
				})
			},
			getUserInfo(){
				this.avatar=uni.getStorageSync('avatar')
				this.username=uni.getStorageSync('username')
				this.ID=uni.getStorageSync('openid')
			},
			intoUserInfo(){
				
			},
			intoEmployee(){
				uni.redirectTo({
					url: '/pages/emplogin/emplogin'
				})
			},
		}
	}
</script>

<style>
	.info-grid{
		
		white-space: pre-wrap;
		font-family: Arial, sans-serif;
		font-size: 33rpx;
		color: #bfbfbf;
		margin-left: 5px;
		margin-top: 10rpx;
		/* 超出几行省略 */
		overflow: hidden;
	}
	.order-text{
		font-size: 37rpx;
		color: #bfbfbf;
	}
	.grid-item-box {
		margin: 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
